<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-row :gutter="20">
            <!-- 姓名查找 -->
            <el-col :span="4">
                <el-input v-model.trim="params.name" placeholder="请输入姓名"></el-input>
            </el-col>
            <!-- 学院查找 -->
            <el-col :span="4">
                <el-input v-model.trim="params.department" placeholder="请输入学院"></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model.trim="params.major" placeholder="请输入专业"></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model.trim="params.stuClass" placeholder="请输入班级"></el-input>
            </el-col>
            <!-- 性别查找 -->
            <el-col :span="4">
                <el-select v-model="params.sex" placeholder="请选择性别">
                    <el-option
                        v-for="item in sexList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-col>
            <!-- 搜索重置按钮 -->
            <el-button type="primary" @click="getCheckInOutPage" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
        </el-row>
        <h2>未入住学生名单</h2>
        <el-row justify="space-between" style="margin-bottom: 20px;">
            <el-col :span="19">
                已选寝室:
                <span>{{ localRoomStd.room }}</span>,
                <span>可容纳人数:4</span>,
                <span>已入住人数:{{ localRoomStd.currentNumber }}</span>
            </el-col>
            <el-col :span="5">
                <el-button
                    type="primary"
                    @click="inSelectItem"
                    :disabled="this.idList.length == 0"
                >批量入住</el-button>
                <el-button plain @click="toggleSelection()">取消选择</el-button>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table
            :data="tableData"
            stripe
            border
            v-loading="loading"
            @selection-change="handleSelectionChange"
            ref="idList"
        >
            <el-table-column type="selection" label="#" :selectable="selectable"></el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="name" label="学生"></el-table-column>
            <el-table-column prop="sex" label="性别" :formatter="sfktFormate"></el-table-column>
            <el-table-column prop="department" label="学院"></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column prop="stuClass" label="班级"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getCheckInOutPage, changeCheckInOutPage } from '@/api/studentInfo'
export default {
    data() {
        return {
            tableData: [],
            loading: false,
            // 需要的参数：宿管账号
            params: {
                type: "0",
                username: "",
                name: "",
                sex: null,
                department: "",
                major: "",
                stuClass: "",
                currentNumber: "",
                pageCurrent: 1,
                pageSize: 10,
            },
            total:0,
            // 性别选项
            sexList: [{
                value: 1,
                label: '女'
            }, {
                value: 0,
                label: '男'
            }],
            room: null,
            currentNumber: null,
            roomId: null,
            // 学生主键集合
            idList: [],
            arr: [],
            localRoomStd:{}
        }
    },
    computed: {
        ...mapGetters(["username"]),
    },
    mounted() {
        this.getCheckInOutPage()
        var value = sessionStorage.getItem('localRoomStd');
        this.localRoomStd = JSON.parse(value)
        console.log(this.localRoomStd);

    },
    methods: {
        // 分页
        // 监听页码变化
        handleCurrentChange(newPage) {
            this.params.pageCurrent = newPage
            this.getRoom()
        },
        // 监听size变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize
            this.getRoom()
        },
        // 格式化性别
        sfktFormate(row, index) {
            if (row.sex == 0) {
                return "男";
            } else if (row.sex == 1) {
                return "女";
            }
        },
        // 获取未入住学生名单
        async getCheckInOutPage() {
            await getCheckInOutPage(this.params).then((res) => {
                this.loading = true
                setTimeout(() => {
                    this.tableData = res.data.records
                    this.loading = false
                    this.total = Number(res.data.total)
                    console.log(res);
                }, 200)

            })
        },
        selectable(row, index) {
            if (this.idList.length + Number(this.localRoomStd.currentNumber) < 4) {
                return true
            }
        },
        // 选中的学生
        handleSelectionChange(val) {
            this.idList = []
            console.log(this.idList);
            val.forEach(item => {
                this.idList.push(item.id) 
            });

        },
        // 取消选择
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.idList.toggleRowSelection(row);
                });
            } else {
                this.$refs.idList.clearSelection();
            }
        },
        // 批量入住
        inSelectItem() {
            if (this.idList.length + Number(this.localRoomStd.currentNumber) > 4) {
                this.$message.error('超出房间可容纳人数')
                return false
            }
            changeCheckInOutPage({ idList: this.idList, roomId: this.localRoomStd.roomId, status: this.params.type, userId: this.username }).then((res) => {
                sessionStorage.clear();
                this.localRoomStd.currentNumber=Number(this.localRoomStd.currentNumber)+this.idList.length;
                sessionStorage.setItem('localRoomStd',JSON.stringify(this.localRoomStd))
                this.getCheckInOutPage()
                this.localRoomStd.currentNumber=Number(this.localRoomStd.currentNumber)
                this.$message.success('操作成功')
            })
        },
        // 搜索重置按钮
        async reset() {
            this.params.name = ""
            this.params.department = ""
            this.params.major = ""
            this.params.stuClass = ""
            this.params.sex = ""
            await getCheckInOutPage(this.params).then((res) => {
                this.loading = true;
                setTimeout(() => {
                    this.tableData = res.data.records;
                    this.loading = false;
                }, 200);
            });
        },
    },
}
</script>